<template>
  <div>
	  <el-container style="height: 100vh;">
        <el-header height="55px" style="padding: 0; display: flex; flex-direction: row; border-bottom: 1px solid #c6c9d0; min-width: 1400px;">
			<div style="align-self: center;flex: 2;"></div>
			<div style="background-color: #d3d3d3; flex: 6;">
				<el-menu
				router
				style="height: 55px;"
				default-active="/index"
				mode="horizontal"
				:ellipsis="false"
				@select="handleSelect"
				>
					<el-menu-item index="/">首页</el-menu-item>
					<el-menu-item index="/goods">全部商品</el-menu-item>
					<el-menu-item index="/orders">我的订单</el-menu-item>
					<el-menu-item index="/user">个人中心</el-menu-item>
					<el-menu-item index="/community">社区服务</el-menu-item>
				</el-menu>
			</div>
			
			<div style="align-self: center;flex: 3; margin-left: 60px;">
				<el-input style="height: 40px;" v-model="SeachKey" placeholder="请输入想了解的商品名称"></el-input>				
			</div>
			
			<div style="align-self: center;flex: 2;">
				<el-button style="width: 60px; height: 40px; "type="primary" plain @click="searchthing"><el-icon size="large"><Search/></el-icon></el-button>
			</div>
			
			<div style="flex: 1; align-self: center;">
			      <el-avatar :icon="UserFilled" />  
			</div>
				<div style="flex: 3; align-self: center; ">
					 <el-button style="margin-right: 10px;" type="primary" circle plain @click="cart"><el-icon size="large" style="margin-right: 2px;"><ShoppingCart /></el-icon></el-button>
					<span style="margin-left: 10px;margin-right: 20px; color: #cccccc; font-size: 1.5rem;">|</span>
					<a v-if="log" @click="logout">退出登录</a>
					<a v-else href="/login">用户登录</a>
					<!--<a @click="logout">退出</a>-->

			</div>
		</el-header>
        <el-main style=" display: flex; flex-direction: column; padding: 0; min-width: 1400px;" >
			
			
			<router-view></router-view>
			
		</el-main>
      </el-container>
  </div>
</template>

<script setup>
import { UserFilled } from '@element-plus/icons-vue'
import { Search,ShoppingCart } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue';
import router from '@/router';
import { useRoute } from 'vue-router';


import VueCookie from 'vue-cookie';
import { ElMessage, ElMessageBox } from 'element-plus';
const SeachKey = ref('')
const log = ref()
loginOrNot()
function loginOrNot(){
	const token = VueCookie.get('token')
	if(token){
		log.value=true
	}
	else{
		log.value=false
	}
}
function logout(){
	
    ElMessageBox.confirm(
        '是否退出登录',
        'Warning',
        {
          confirmButtonText: '退出',
          cancelButtonText: '再想想',
          type: 'warning',
        }
      )
        .then(() => {
			window.sessionStorage.clear();
			const token0 = VueCookie.get('token')
			if(token0){
				ElMessage({
				  type: 'error',
				  message: '退出登录失败',
				})
			}
			else{ElMessage({
            type: 'success',
            message: '您已退出登录',
          })}
          
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '您以放弃退出登录',
          })
        })
}
function searchthing(){
	
}
function cart(){
	router.push('/购物车路由')
}
</script>

<style scoped lang="scss">

</style>